<template>
    <div class="content">
        <div class="table-content">
            <template>
                <div class="form">
                    <el-form style="display: flex;" label-width="100px" :model="form">
                        <el-form-item label="用户名称：">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                        <el-button style="margin-left: 20px; height: 40px;" type="primary" size="mini">查询</el-button>
                    </el-form>
                    <el-button type="primary" @click="addUser">新增用户</el-button>
                </div>
                <el-table :row-style="{ height: '20px' }" :cell-style="{ padding: '5px' }" class="table-box"
                    :data="tableData" style="width: 100%" height="620" v-loading="loading" border>
                    <el-table-column prop="id" label="用户id" width="120" align="center"></el-table-column>
                    <el-table-column prop="name" label="用户名称" width="120" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="120" align="center"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="120" align="center"></el-table-column>
                    <el-table-column prop="address" label="地址" width="120" align="center"></el-table-column>
                    <el-table-column prop="email" label="邮箱" width="180" align="center">
                        <template slot-scope="scope">
                            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                {{ scope.row.email }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" min-width="200" align="center">
                        <template slot-scope="scope">
                            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                {{ scope.row.createTime }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" min-width="200" align="center">
                        <template slot-scope="scope">
                            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                {{ scope.row.updateTime }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
                            <el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="role" label="角色" width="120" align="center"></el-table-column>
                    <el-table-column prop="remark" label="备注" width="120" align="center"></el-table-column>
                    <el-table-column prop="dept" label="部门" width="120" align="center"></el-table-column>
                    <el-table-column prop="" label="操作" width="200">
                        <template slot-scope="scope">
                            <div style="display: flex;">
                                <el-button type="primary" @click="editUser(scope.row)">编辑</el-button>
                                <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteUser(scope.row)">
                                    <el-button slot="reference" type="danger">删除</el-button>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination background layout="total,prev, pager, next,sizes" :total="total" :page-size="page_size"
                @current-change="getPageData" @size-change="handleSizeChange" :page-sizes="[5, 10, 15]"
                :current-paeg.sync="page">
            </el-pagination>
        </div>
        <addorEditUsers ref="addorEditUsers" @refresh="getUserInfo"></addorEditUsers>
    </div>
</template>
<script>
import { userInfo, deleteUser } from '../../../api/user/userInfo';
import addorEditUsers from './addorEditUsers.vue';
export default {
    components: {
        addorEditUsers
    },
    data() {
        return {
            loading: false, page: 1, page_size: 10, total: 0, tableData: [], form: {
                username: "",
            }
        }
    },
    methods: {
        async getUserInfo() {
            this.loading = true
            setTimeout(async () => {

                try {
                    let res = await userInfo({
                        page: this.page,
                        page_size: this.page_size
                    })
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total
                        this.loading = false
                    }
                } catch (err) {
                    this.loading = false
                    this.tableData = []
                    console.log(err)
                    this.$message({
                        message: '列表数据获取失败',
                        type: 'error'
                    })
                }

            }, 300);
        },
        getPageData(val) {
            this.page = val
            this.getUserInfo()
        },
        handleSizeChange(val) {
            this.page_size = val
            this.getUserInfo()
        },
        addUser() {
            console.log(1);

            this.$refs.addorEditUsers.init({
                type: 'add'
            })
        },
        editUser(row) {
            this.$refs.addorEditUsers.init({
                type: 'edit',
                row: row
            })
        },
        async deleteUser(row) {
            let id = row.id
            let res = await deleteUser({ id })
            if (res.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getUserInfo()
            } else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                })
            }
        }
    },
    async mounted() {
        this.getUserInfo()

    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
    width: 100%;
    min-height: calc(100vh - 120px);
    background: rgb(255, 255, 255);
    margin-top: 10px;
    margin-right: 10px;
    // 设置边框
    border: 1px solid #ccc;
    position: relative;
}

::v-deep .el-pagination {
    float: right;
    margin-top: 10px;
    margin-bottom: 25px;
}

::v-deep .el-table thead th {
    background-color: #f5f7fa;
    color: #000 !important;
    border: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}

.form {
    padding: 10px;
}

.input-btn {
    width: 200px;
}
</style>